<!-- 
<template>
  <div class=" add-data">
    <p>商品添加</p>
    <div>
      <el-form ref="ruleFormRef" style="max-width: 400px" :model="ruleForm" :rules="rules" label-width="auto"
        class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="商品名称">
          <el-input v-model="ruleForm.name" />
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select v-model="ruleForm.region" placeholder="热销榜">
            <el-option label="便宜" value="shanghai" />
            <el-option label="好吃" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number style="width: 400px;" v-model="num" :min="0" @change="priceChange" />
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input v-model="ruleForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="submitForm(ruleFormRef)"> 添加商品 </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script lang="ts" setup>

import { reactive, ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import type { ComponentSize, FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'

const num = ref(15)
const priceChange = (value: number) => {
  console.log(value)
}
interface RuleForm {
  name: string
  region: string
  num: string
  type: string[]
  desc: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  name: '番茄鸡蛋炒饭',
  region: '',
  num: '0',
  type: [],
  desc: '这个是我炒的非常好吃的炒饭',
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入菜品名称', trigger: 'blur' },
    { min: 2, max: 15, message: '长度应该是2到15', trigger: 'blur' },
  ],
  region: [{ required: true, message: '请选择所属分类', trigger: 'change', },],
  num: [{ required: true, message: '定价', trigger: 'change', },],
  type: [{ type: 'array', required: true, message: '请描述这个菜品', trigger: 'change', },],
  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' },],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const fileList = ref<UploadUserFile[]>([
  {
    name: 'food.jpeg',
    url: 'https://bpic.588ku.com/back_origin_min_pic/21/03/30/08b5c525d7ead8dfae119bbdffa9bc8c.jpg',
  },

])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
}
</script>

<style scoped>
.add-data {
  margin: 20px;

}
</style> -->
<template>
  <div id="AddView">
    <div class="box">
      <div class="box_header">商品添加</div>
      <div class="box_body">
        <span>商品名称</span>
        &nbsp;
        <input type="text" v-model="goodsName">
      </div>
      <div class="box_body">
        <span>所属分类</span>
        &nbsp;
        <input type="text" v-model="goodsClass">
      </div>
      <div class="box_body">
        <span>商品价格</span>
        &nbsp;
        <el-input-number :min="1" :max="99999999" @change="handleChange" class="numberUse" v-model="goodsPrice" />
      </div>
      <div class="box_body">
        <span>商品描述</span>
        <br><br>
        &nbsp;
        <textarea name="" id="" placeholder="请输入商品的描述" v-model="goodsWord"></textarea>
      </div>
      <div class="box_body">
        <span>商品图片</span>
        &nbsp;
        <el-upload class="avatar-uploader" action="http://127.0.0.1:5000/goods/goods_img_upload" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
      <div class="box_body">
        <el-button type="primary" @click="handleAdd">添加商品</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { fetchLoginTen } from '../../api/index'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'

//数字输入框
const handleChange = (value: number) => {
  console.log(value)
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log(response);//拿到上传的图片具体信息
  goodsImgEdit.value = response.imgUrl;//时imgUrl不是imageUrl,和组件的不一样
  //console.log(goodsImgEdit.value);//成功
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  // 定义支持的图片格式
  const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];

  // 检查文件类型是否为支持的格式
  if (!validImageTypes.includes(rawFile.type)) {
    ElMessage.error('Avatar picture must be JPG, PNG or GIF format!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size cannot exceed 2MB!');
    return false;
  }
  return true;
};

//商品添加
const goodsName = ref();
const goodsClass = ref();
const goodsPrice = ref(1);
const goodsImgEdit = ref();
const goodsWord = ref();
const handleAdd = async () => {

  interface IUserInfo {
    name: string,
    category: string,
    price: any,
    imgUrl: string,
    goodsDesc: string,
  }

  const userInfo = ref<IUserInfo>({
    name: goodsName.value,
    category: goodsClass.value,
    price: goodsPrice.value,
    imgUrl: goodsImgEdit.value,
    goodsDesc: goodsWord.value,
  })

  console.log(userInfo.value);
  const res = await fetchLoginTen(userInfo.value);
  //console.log(res);
  alert(res.data.msg);
}
</script>

<style scoped>
.box {
  width: 85vw;
  margin-left: 1vw;
  box-shadow: 0.1vw 0.1vw 0.1vw 0.1vw #ddd;
}

.box_header {
  padding: 1vw;
  border-bottom: 1px solid #ddd;
}

.box_body {
  padding: 1.2vw;

  input {
    width: 15vw;
    height: 2vw;
    outline: none;
    border: 0.1vw solid #ddd;
    border-radius: 5px;
  }

  >.numberUse {
    width: 15vw;
  }

  >textarea {
    width: 15vw;
    height: 3vw;
  }
}

.updataImgBox {
  width: 10vw;
  height: 10vw;
  border: 1px solid red;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>